import React from 'react'
import { GETLIST, ALLSTATE, CHECKALL, CHECKONE, CHANGENUM, ADDSHOPCAR } from "../../../types/store.d"
import { Toast, NavBar, Checkbox, SubmitBar, Image, ProductCard, Tag, Grid, Button } from 'react-vant';
import { WeappNav, Aim, AddO } from '@react-vant/icons';
import { useDispatch, useSelector } from "react-redux"
import { useNavigate } from "react-router-dom"
function Shopcar() {
  const dispatch = useDispatch()
  const navigate = useNavigate()

  // 获取购物车数据
  const shopArr = useSelector((state: ALLSTATE) => {
    return state.shopArr
  })
  // 获取全选状态
  const checkstate = useSelector((state: ALLSTATE) => {
    return state.checkstate
  })
  //湖区总价
  const allmoney = useSelector((state: ALLSTATE) => {
    return state.allmoney
  })
  // 单选
  const checkone = (id: string) => {
    dispatch({
      type: CHECKONE,
      payload: id
    })
  }
  // 全选
  const allchecked = (v: boolean) => {
    console.log(v);
    dispatch({
      type: CHECKALL,
      payload: v
    })

  }
  // 数据加减
  const handelclick = (id: string, str: string) => {
    console.log(id, str);

    let obj: { id: string, isAdd: boolean } = {
      id: id, isAdd: false
    }
    if (str == "add") {
      obj.isAdd = true;
    } else {
      obj.isAdd = false;
    }
    dispatch({
      type: CHANGENUM,
      payload: obj
    })
  }
  return (
    <div className="shopcar">
      <header>
        <NavBar
          title="每日优鲜"
          onClickLeft={() => navigate("/home/classify")}
        />
      </header>
      {
        shopArr && shopArr.length > 0 ? shopArr.map((item, index) => {
          return <div key={index} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <Checkbox checked={item.flag} onChange={() => checkone(item.id)} />
            <ProductCard style={{ width: "90%", }}
              num={item.num}
              price={item.price}
              desc={item.desc}
              title={item.title}
              thumb={item.img}
              footer={
                <>
                  <Button size="mini" round plain onClick={() => handelclick(item.id, "add")}>
                    ++
                  </Button>
                  <Button size="mini" round plain onClick={() => handelclick(item.id, "reduce")}>
                    --
                  </Button>
                </>
              }
            />
          </div>
        }) : "购物车暂时没有数据"
      }
      <div className="demo-submit-bar">
      <SubmitBar
        price={allmoney * 100}
        buttonText="提交订单"
      >
        <Checkbox checked={checkstate} onChange={(v) => allchecked(v)}>全选</Checkbox>
      </SubmitBar>
    </div>
    </div >
  )
}

export default Shopcar